<template>
  <div class="profile" ref="profile">
    <profile-nav-bar></profile-nav-bar>
    <div class="list">
      <div class="baseinfo">
        <div slot="left" class="left_img">
          <img
            src="https://s5.mogucdn.com/mlcdn/c45406/200722_198lc5dfh935l81e5gag7ag7dj5ib_640x960.jpg"
            alt=""
          />
        </div>
        <div slot="center" class="center_info">
          <div class="center_info_ncname">呆呆可达鸭</div>
          <div class="center_info_username">账号名称</div>
          <div>关注数量</div>
        </div>
        <div slot="right" class="right-info">
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
      <div class="info_item">
        <div class="item_left">
          <div>
            <div>
              <span>0.00元</span>
            </div>
            <div>
              <span>我的余额</span>
            </div>
          </div>
        </div>
        <div class="item_left">
          <div>
            <div>
              <span>0</span>
            </div>
            <div>
              <span>我的优惠</span>
            </div>
          </div>
        </div>
        <div class="item_left">
          <div>
            <div>
              <span>0积分</span>
            </div>
            <div>
              <span>我的积分</span>
            </div>
          </div>
        </div>
      </div>
    <div class='test'>
      <div class="new_item" v-for="(item, index) in newsinfo" :key="index">
        <div class="news_item_content">
          <div class="picture">
            <img :src="item.icon" alt="图片无法显示" />
          </div>
          <div class="words">
            {{ item.title }}
          </div>
        </div>
      </div>
      </div>
      <!-- <div class="box2" ref="box2">
        <h1>评价</h1>
      </div>
      <div class="box3" ref="box3">
        <h1>详情</h1>
        offsetTop
        <h1>详情</h1>
        <h1>详情</h1>
        <h1>详情</h1>
        <h1>详情</h1>
        <h1>详情</h1>
        <h1>详情</h1>
        <h1>详情</h1>
        <h1>详情</h1>
        <h1>详情</h1>
      </div> -->
    </div>
    <div class="topbar" ref="topbarshow"></div>
  </div>
</template>

<script>
import Bscroll from "better-scroll";
import ProfileNavBar from "./children/ProfileNavBar.vue"
import layoutlcr from "@/components/common/layout/layout_lcr.vue";
// import Bscroll from "@/components/common/bscorll/Bscroll.vue";
export default {
  components: { Bscroll, layoutlcr,ProfileNavBar},
  name: "Profile",
  data() {
    return {
      bs: null,
      box2Y: 0,
      box3Y: 0,
      icon1: require("@/assets/szzq_images/card_icon_补偿安置方案.png"),
      newsinfo: [
        {
          icon: require("@/assets/szzq_images/card_icon_补偿安置方案.png"),
          title: "我的消息",
        },
        {
          icon: require("@/assets/szzq_images/card_icon_张贴回执.png"),
          title: "积分商城",
        },
        {
          icon: require("@/assets/szzq_images/card_icon_补偿安置方案.png"),
          title: "会员卡",
        },
      ],
    };
  },
  created() {
    document.body.parentNode.style.overflow = "hidden";
  },
  mounted() {
    this.$nextTick(() => {
      this.bs = new Bscroll(this.$refs.profile, {
        probeType: 3,
      });

      this.bs.on("scroll", (param) => {
        // console.log("===k", param);
        var tt = document.querySelector(".topbar");
        // 评价
        var pj = document.querySelector(".picture");
        var ss = pj.getBoundingClientRect();
        console.log("视口位置===", ss);
        if (ss.top < 400) {
          pj.style.color = "pink";
        }
        tt.style.visibility = "hidden";

        if (param.y < -100) {
          // console.log("visible", param.y <= this.sY);
          tt.style.visibility = "visible";
        } else {
          // console.log("hidden=====", param.y, param.y <= this.sY);
          tt.style.visibility = "hidden";
        }
      });
    });
  },
  methods: {},
};
</script>
<style>
.profile {
  position: absolute;
  width: 100%;
  top: 44px;
  bottom: 49px;
  height: calc(100%-93px);
  background: #F1F1F1;
}
.box1 {
  /* height: 200px; */
  background: grey;
}
.topbar {
  background: green;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 44px;
  /* display: none; */
  visibility: hidden;
  /* visibility: visible; */
}
/* 头像部分
 */
.baseinfo {
  display: flex;
  /* justify-content: center; */
  justify-content: space-between;
  align-items: center;
  padding: 10px 10px;
  background: var(--tint-color);
}
.left_img {
  /* background: green; */
  width: 100px;
}
.left_img img {
  height: 100px;
  width: 100px;
  border-radius: 50%;
}
.center_info {
  flex: 1;
  margin-left: 10px;
}
.center_info_ncname {
  font-size: 24px;
}
.center_info_username {
  margin: 4px auto;
}
.right-info {
  width: 20px;
  /* background: pink; */
}
/* 头像下面个人信息优惠记录 */
.info_item {
  display: flex;
  height: 100px;
  justify-content: center;
  justify-items: center;
  align-items: center;
  background: #fff;
}
.info_item .item_left {
  flex: 1;
  display: flex;
  justify-content: center;
  justify-items: center;
  align-items: center;
  text-align: center;
  height: 100%;
  border-right: 1px solid #F1F1F1;
}
.info_item .item_left:last-child{
  border-right: none;
}
.test {
 background: #fff;
 margin: 10px auto;
}
.new_item {
  /* background: green; */
  margin-left: 10px;
  /* margin-right:10px; */
  
}
.news_item_content {
  display: flex;
  justify-items: center;
  align-items: center;
  height: 40px;
}
.news_item_content .picture {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 50px;
}
.news_item_content .picture img {
  height: 28px;
  width: 32;
}
.news_item_content .words {
  height: 40px;
  line-height: 40px;
  flex: 1;
  border-bottom: 1px solid #F1F1F1;
}
.test .new_item:last-child .news_item_content .words{
  border-bottom:none;
}
</style>